<template>
	<el-dialog v-model="state.dialogVisible" title="Save the system settings" width="80%" :before-close="methods.handleClose">
		<el-form ref="ruleFormRef" :model="state.ruleForm" :rules="state.rules" label-width="120px" class="demo-ruleForm" status-icon>
			<el-row gutter="20">
				<el-col :span="12">
					<el-form-item label="Name" prop="initName">
						<el-input v-model="state.ruleForm.initName" placeholder="Please enter a name" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row gutter="20">
				<el-col :span="12">
					<el-form-item label="Set the type" prop="initType">
						<el-select v-model="state.ruleForm.initType" @change="changeInitType" class="m-2" placeholder="Please select a setting type">
<!--							<el-option label="editor" :value="1" />-->
							<el-option label="Image" :value="2" />
<!--							<el-option label="Text input" :value="3" />-->
<!--							<el-option label="Text field" :value="4" />-->
							<!-- <el-option label="复选框" :value="5" /> -->
							<!-- <el-option label="视频" :value="6" /> -->
							<!-- <el-option label="开关" :value="7" /> -->
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="remark" prop="remark">
						<el-input v-model="state.ruleForm.remark" placeholder="Please enter a comment" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="value" prop="initValue">
						<el-input v-if="state.ruleForm.initType === 3" v-model="state.ruleForm.initValue" placeholder="Please enter a value" />
						<Editor v-model:get-html="state.ruleForm.initValue" v-else-if="state.ruleForm.initType === 1"></Editor>
						<textarea style="width: 100%; height: 300px" v-else-if="state.ruleForm.initType === 4" v-model="state.ruleForm.initValue"></textarea>
						<uploadMedia v-else-if="state.ruleForm.initType === 2" width="150px" height="150px" dir="setting" v-model="state.ruleForm.initValue">
						</uploadMedia>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="methods.handleClose">Cancel</el-button>
				<el-button type="primary" @click="methods.submit(ruleFormRef)"> Confirm </el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { defineAsyncComponent, inject, onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import type { FormInstance, FormRules } from 'element-plus';
import { allApiType } from '/@/api/api';

const Editor = defineAsyncComponent(() => import('/@/components/editor/index.vue'));
const uploadMedia = defineAsyncComponent(() => import('/@/components/uploadMedia/uploadMedia.vue'));

const ruleFormRef = ref<FormInstance>();
const requestApi: any = inject('$request');
const tools: any = inject('$tools');
const emit = defineEmits(['callback']);

const state = reactive<any>({
	dialogVisible: false,
	ruleForm: {},
	rules: {
		initName: [{ required: true, message: 'Please enter a name', trigger: 'blur' }],
		initType: [{ required: true, message: 'Please select a type', trigger: 'blur' }],
		initValue: [{ required: true, message: 'Please enter a value', trigger: 'blur' }],
	},
});

const methods = {
	changeInitType() {
		console.log(state.ruleForm);
		state.ruleForm.initValue = '';
	},
	async submit(formEl: FormInstance | undefined) {
		if (!formEl) return;
		await formEl.validate((valid, fields) => {
			if (valid) {
				if (state.ruleForm.initType === 2) {
					state.ruleForm.initValue = state.ruleForm.initValue[0];
				}
				allApiType('/admin/InitsInitDate/UpdateInitData', 'RAW', state.ruleForm).then(() => {
					ElMessage.success('Save Successful');
					methods.handleClose();
				});
			} else {
				ElMessage.warning('Please complete the required fields');
			}
		});
	},
	init(row: any) {
		allApiType('/admin/InitsInitDate/findUtilsInitDataDetails', 'GET', { initId: row.initId }).then((res: any) => {
			state.ruleForm = res.data;
			state.dialogVisible = true;
		});
	},
	handleClose() {
		emit('callback');
		state.ruleForm = {};
		state.dialogVisible = false;
	},
};
onMounted(() => {});

defineExpose({
	...methods,
});
</script>
<style scoped lang="scss">
.el-row {
	margin-bottom: 20px;
}

.avatar-uploader {
	width: 178px;
	height: 178px;
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>
